<template>
	<view class="content">
		<!-- <image v-if="userId" style="width: 0;height: 0;position: absolute;top: 0;left: 0;" :src="`https://ywtmp.hnwytkj.com/static/images/${userId}/shareCard.jpg`" mode=""></image> -->
		<view class="top">
			<!-- <view v-if="recommInfo.userProfileDO" class="recomm-info">
				<view class="avatar">
					<image v-if="recommInfo.userProfileDO" :src="recommInfo.userProfileDO.avatar" mode="scaleToFill">
					</image>
				</view>
				<view class="right">
					<view class="right-top">
						<text v-if="recommInfo.userProfileDO">{{recommInfo.userProfileDO.realName}}</text>
						<view v-if="recommInfo.companyProfileDO" class="company">
							{{recommInfo.companyProfileDO.companyName}}</view>
					</view>
					<view class="right-bottom">
						<view class="text">
							<image src="https://ywtmp.hnwytkj.com/static/images/phone2.png" mode=""></image>
							<text v-if="recommInfo.userProfileDO">{{recommInfo.userProfileDO.phoneNumber}}</text>
						</view>
						<view class="btn" @tap="look">游览名片</view>
					</view>
				</view>
			</view> -->
			<view class="section">
				<template v-if="info.userProfileDO">
					<view class="section-top">
						<view>{{ info.userProfileDO.realName || '姓名：未填写' }}</view>
						<view class="avatar">
							<image v-if="info.userProfileDO &&　info.userProfileDO.avatar"
								:src="info.userProfileDO.avatar" mode="scaleToFill"></image>
							<open-data v-else type="userAvatarUrl"></open-data>
						</view>
					</view>
					<view class="section-bottom">
						<image src="https://ywtmp.hnwytkj.com/static/images/pic.png" mode="" class="background-icon">
						</image>
						<view class="section-bottom-content">
							<view>{{ info.userProfileDO.jobTitle || '职务：未填写' }}</view>
							<view class="mt24">{{ info.companyProfileDO.companyName || '公司名称：未填写' }}</view>
							<view class="item-section mt36">
								<image src="https://ywtmp.hnwytkj.com/static/images/phone.png" mode="aspectFit"></image>
								<text>{{ info.userProfileDO.phoneNumber || '未填写' }}</text>
							</view>
							<view class="item-section mt25">
								<image src="https://ywtmp.hnwytkj.com/static/images/wx.png" mode="aspectFit"></image>
								<text>{{ info.userProfileDO.wechatId || '未填写' }}</text>
							</view>
							<view class="item-section mt26 address">
								<image src="https://ywtmp.hnwytkj.com/static/images/address.png" mode="aspectFit"></image>
								<text>{{ info.companyProfileDO.address.address || '未填写' }}</text>
							</view>
						</view>
						<!-- <view class="edit-btn">编辑名片</view> -->
					</view>
				</template>
				<template v-else>
					<view class="section-top">
						<view>
							<!-- <view>{{ userInfo.nickName }}</view> -->
							<open-data type="userNickName"></open-data>
						</view>
						<view class="avatar">
							<!-- <image :src="userInfo.avatar" mode="aspectFit"></image> -->
							<open-data type="userAvatarUrl"></open-data>
						</view>
					</view>
					<view class="section-bottom">
						<image src="https://ywtmp.hnwytkj.com/static/images/pic.png" mode="" class="background-icon">
						</image>
						<view class="section-bottom-content">
							<view>职务：未填写</view>
							<view class="mt24">公司名称：未填写</view>
							<view class="item-section mt36">
								<image src="https://ywtmp.hnwytkj.com/static/images/phone.png" mode="aspectFit"></image>
								<text>未填写</text>
							</view>
							<view class="item-section mt25">
								<image src="https://ywtmp.hnwytkj.com/static/images/wx.png" mode="aspectFit"></image>
								<text>未填写</text>
							</view>
							<view class="item-section mt26 address">
								<image src="https://ywtmp.hnwytkj.com/static/images/address.png" mode="aspectFit"></image>
								<text>未填写</text>
							</view>
						</view>
						<!-- <view class="edit-btn" @tap="editCard">编辑名片</view> -->
					</view>
				</template>
			</view>
			<!-- <view v-if="isPhone" class="red-envelope" @tap="goToRedEnvelope">
			<image src="https://ywtmp.hnwytkj.com/static/images/red-envelope.png" mode="widthFix"></image>
		</view> -->
			<view class="action-section">
				<view class="action-btn" @tap="saveToPhone">保存到通讯录</view>
				<view class="action-btn btn2" @tap="callPhone">拨打电话</view>
			</view>
			<view class="num-box">
				<view>{{info.userProfileDO ? info.userProfileDO.viewCount : 0}}人浏览</view>
				<view v-if="token" class="flex align-center" @tap="zan">
					<uni-icons v-if="info.like" type="hand-up" size="24" color="#FF415F"></uni-icons>
					<uni-icons v-if="!info.like" type="hand-up" size="24"></uni-icons>
					<text>{{info.userProfileDO ? info.userProfileDO.likeCount : 0}}</text>
				</view>
				<view v-else class="flex align-center">
					<uni-icons type="hand-up" size="24"></uni-icons>
					<!-- <uni-icons type="hand-up" size="24" color="#4B73FF"></uni-icons> -->
					<text>{{info.userProfileDO ? info.userProfileDO.likeCount : 0}}</text>
					<button @tap="login"></button>
				</view>
			</view>
		</view>
		<view v-if="info.companyProfileDO" class="bottom">
			<view class="introduce-item" style="padding-top: 0;">
				<view class="introduce-item-content">
					<view class="flex justify-between">
						<view v-if="token" class="item-content2">
							<view>
								<image src="../../static/images/shareCard.png" mode="" class="img"></image>
								<view>分享名片</view>
								<button open-type="share"></button>
							</view>
						</view>
						<view v-if="!token" class="item-content2">
							<view @tap="goToLogin">
								<image src="../../static/images/shareCard.png" mode="" class="img"></image>
								<view>分享名片</view>
							</view>
						</view>
						<view v-if="token" class="item-content2" @tap="changeLike">
							<view>
								<image v-if="info.collected" src="../../static/images/like-1.png" mode="" class="img">
								</image>
								<image v-else src="../../static/images/like.png" mode="" class="img"></image>
								<view>收藏名片</view>
							</view>
						</view>
						<view v-if="!token" class="item-content2">
							<view>
								<image src="../../static/images/like.png" mode="" class="img"></image>
								<view>收藏名片</view>
							</view>
							<button @tap="login"></button>
						</view>
						<view class="item-content2" @tap="copy">
							<view>
								<image src="../../static/images/copyWx.png" mode="" class="img"></image>
								<view>添加微信</view>
							</view>
						</view>
						<view class="item-content2" @tap="goAddress">
							<view>
								<image src="../../static/images/daohang.png" mode="" class="img"></image>
								<view>一键导航</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<template v-for="(item, index) in modules" :key="item">
				<view v-if="modules.includes('companyRadar') && item === 'companyRadar'" class="introduce-item">
					<view class="title">企业雷达</view>
					<view class="introduce-item-content">
						<view class="flex justify-between">
							<view class="item-content">
								<view>
									<view class="num">{{info.userProfileDO ? info.userProfileDO.shareCount : 0}}</view>
									<view>发送次数</view>
								</view>
							</view>
							<view class="item-content">
								<view>
									<view class="num">{{info.userProfileDO ? info.userProfileDO.viewCount : 0}}</view>
									<view>访问人数</view>
								</view>
							</view>
							<view class="item-content">
								<view>
									<view class="num">{{info.userProfileDO ? info.userProfileDO.linkCount : 0}}</view>
									<view>引流次数</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyImpression') && item === 'companyImpression'"
					class="introduce-item">
					<view class="title">
						<text>企业印象</text>
					</view>
					<view class="introduce-item-content">
						<view class="flex">
							<view v-for="(item, index) in info.companyProfileDO.companyImpression" :key="index"
								class="tag" :style="{color: item.color, background: calcColor(item.color) }">
								{{item.text}}</view>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyIntro') && item === 'companyIntro'" class="introduce-item">
					<view class="title">
						<text>我的简介</text>
					</view>
					<view class="introduce-item-content">
						<view>{{info.companyProfileDO.companyIntro}}</view>
					</view>
				</view>
				<view v-if="modules.includes('myImpression') && item === 'myImpression'" class="introduce-item">
					<view class="title">
						<text>我的印象</text>
					</view>
					<view class="introduce-item-content">
						<view class="flex">
							<view v-for="(item, index) in info.companyProfileDO.myImpression" :key="index" class="tag"
								:style="{color: item.color, background: calcColor(item.color) }">{{item.text}}</view>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyComments') && item === 'companyComments'" class="introduce-item">
					<view class="title">
						<text>企业介绍</text>
					</view>
					<view class="introduce-item-content">
						<view class="swiper">
							<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
								<swiper-item v-for="(item, index) in info.companyProfileDO.companyComments.imgs"
									:key="index">
									<image :src="item" mode="aspectFit"></image>
								</swiper-item>
							</swiper>
						</view>
						<view class="text">{{info.companyProfileDO.companyComments.content}}</view>
					</view>
				</view>
				<view v-if="modules.includes('companyIntroImg') && item === 'companyIntroImg'" class="introduce-item">
					<view class="title">
						<text>图文介绍</text>
					</view>
					<view class="introduce-item-content">
						<image v-for="(item, index) in info.companyProfileDO.companyIntroImg" :key="index" :src="item"
							mode="widthFix"></image>
					</view>
				</view>
				<view v-if="modules.includes('address') && item === 'address'" class="introduce-item">
					<view class="title">
						<text>企业地址</text>
					</view>
					<view class="introduce-item-content">
						<view class="map">
							<map :latitude="info.companyProfileDO.address.latitude"
								:longitude="info.companyProfileDO.address.longitude" :markers="covers"></map>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyVideo') && item === 'companyVideo'" class="introduce-item">
					<view class="title">
						<text>视频展示</text>
					</view>
					<view class="introduce-item-content">
						<view class="placeholder">
							<video :src="info.companyProfileDO.companyVideo"></video>
						</view>
					</view>
				</view>
			</template>
		</view>
		<loginModal ref="loginModal" @success="success" />
		<TabBar @tabClick="tabClick" :token="token" @login="showLogin" :display="display"/>
	</view>
</template>

<script>
	import {
		TabBar
	} from '@/components/tabbar/index.vue'
	import loginModal from '@/components/login/index.vue'
	import http from '@/utils/http.js'
	export default {
		components: {
			TabBar,
			loginModal
		},
		data() {
			return {
				token: '',
				userId: '',
				userInfo: {},
				recommInfo: {},
				myInfo: {},
				info: {},
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: "/static/images/location.png",
					width: 30,
					height: 30,
				}],
				modules: [],
				modulesMap: {
					'企业印象': 'companyImpression',
					'企业视频': 'companyVideo',
					'企业介绍': 'companyComments',
					'图文展示': 'companyIntroImg',
					'企业地址': 'address',
					'我的简介': 'companyIntro',
					'我的印象': 'myImpression',
					'企业雷达': 'companyRadar'
				},
				param: {
					code: ''
				},
				isPhone: false,
				scene: '',
				display: 0
			}
		},
		onLoad(options) {
			console.log(options, 'options')
			this.token = uni.getStorageSync('token')
			this.userId = options.id	
			if (options.id) {
				const isPhone = this.isChinesePhoneNumber(options.id)
				this.isPhone = isPhone
				if (isPhone) {
					getApp().globalData.business_id = options.id
				}
			}
			if (options.encrypted) {
				getApp().globalData.encryptedData = options.encrypted
			}
			if (options.scene) {
				this.scene = options.scene
				const paramsObj = this.urlParams(options.scene)
				this.userId = paramsObj.id
			}
			this.getData()
			this.getRecommData()
			if (this.token) {
				// this.createVisitor()
				this.getInfo()
			}
		},
		methods: {
			urlParams(scene) {
				// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				const str = decodeURIComponent(scene).replace('?', '&')
				let strArr = str.split('&')
				strArr = strArr.filter(item => item)
				const result = {}
				strArr.filter(item => {
					const key = item.split('=')
					result[key[0]] = key[1]
				})
				return result
			},
			isChinesePhoneNumber(phone) {
				const regex = /^1[3-9]\d{9}$/;
				return regex.test(phone);
			},
			look() {
				uni.navigateTo({
					url: `/pagesA/share/card?id=${this.recommInfo.companyProfileDO.id}&encrypted=${this.recommInfo.userProfileDO.level}`, // 分享的路径
				})
			},
			goToRedEnvelope() {
				if (!this.token) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，去登录？',
						success: (res) => {
							if (res.confirm) {
								this.login()
							}
						}
					});
					return false
				}
				const business_id = getApp().globalData.business_id
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (res) => {
						uni.request({
							url: `https://newretail.3d89178.com.cn/api/Auth/getCardInfo?business_id=${business_id}&jscode=${res.code}`,
							success(response) {
								const {
									statusCode,
									data,
									errMsg
								} = response;
								if (statusCode === 200) {
									if (data.code === 200) {
										uni.navigateToMiniProgram({
											appId: 'wx534aae667bce24a9',
											path: `pages/index/index?business_id=${business_id}`,
										})
									} else {
										uni.showModal({
											title: '提示',
											content: '您必须创建了名片，才能领取红包，是否前往创建？',
											success: function(res) {
												if (res.confirm) {
													uni.navigateTo({
														url: '/pagesA/edit/editEnterpriseInformation'
													})
												}
											}
										});
									}
								} else {
									uni.showToast({
										title: errMsg,
										icon: 'none'
									});
								}
							}
						})
					}
				})
			},
			success() {
				this.token = uni.getStorageSync('token')
				if (this.token) {
					this.getData()
					this.createVisitor()
					this.getInfo()
				}
			},
			login() {
				// uni.navigateTo({
				// 	url: '/pages/login/index'
				// })
				this.$refs.loginModal.open()
			},
			goToLogin() {
				uni.showModal({
					title: '提示',
					content: '您还未登录，去登录？',
					success: (res) => {
						if (res.confirm) {
							this.login()
						}
					}
				});
			},
			showLogin(code) {
				this.login()
			},
			createVisitor() {
				http({
					url: 'card/visitor/create',
					method: 'post',
					data: {
						visitedUserId: this.userId,
						visitingUserId: uni.getStorageSync('userId'),
						visitType: 0,
						visitCount: 1,
						latestVisitTime: new Date().toLocaleDateString('chinese', {
							hour12: false
						})
					}
				})
			},
			tabClick(index) {
				if (index === 0) {
					// this.save()
					this.saveToPhone()
				} else if (index === 1) {
					if (!this.token) {
						uni.showModal({
							title: '提示',
							content: '您还未登录，去登录？',
							success: (res) => {
								if (res.confirm) {
									this.login()
								}
							}
						});
						return false
					}
				} else if (index === 2) {
					this.callPhone()
				} else if (index === 3) {
					this.goAddress()
				} else {
					if (!this.token) {
						uni.showModal({
							title: '提示',
							content: '您还未登录，去登录？',
							success: (res) => {
								if (res.confirm) {
									this.login()
								}
							}
						});
						return false
					}
					uni.navigateTo({
						url: '/pagesA/webview/webview'
					})
					// uni.navigateTo({
					// 	url: '/pagesA/webview/index?' + this.info.companyProfileDO
					// })
				}
			},
			save() {
				if (!this.token) {
					uni.showModal({
						title: '提示',
						content: '您还未登录，去登录？',
						success: (res) => {
							if (res.confirm) {
								this.login()
							}
						}
					});
					return false
				}
				http({
					url: 'card/business-card-folder/create',
					method: 'post',
					data: {
						collectedUserId: this.userId,
						collectorId: uni.getStorageSync('userId')
					}
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					}
				})
			},
			goAddress() {
				uni.openLocation({
					"latitude": this.info.companyProfileDO.address.latitude,
					"longitude": this.info.companyProfileDO.address.longitude,
					address: this.info.companyProfileDO.address.address, //要去的具体地址 
				})
			},
			callPhone() {
				debugger
				uni.makePhoneCall({
					phoneNumber: this.info.userProfileDO.phoneNumber
				});
			},
			hexToRgba(hex, alpha) {
				// 去除可能的'#'字符并检查长度
				hex = hex.replace('#', '');
				if (hex.length !== 6) {
					return ''
				}

				// 解析十六进制为十进制
				let r = parseInt(hex.substr(0, 2), 16);
				let g = parseInt(hex.substr(2, 2), 16);
				let b = parseInt(hex.substr(4, 2), 16);

				// 返回RGBA格式的字符串
				return `rgba(${r}, ${g}, ${b}, ${alpha})`;
			},
			calcColor(color) {
				return this.hexToRgba(color, 0.3)
			},
			changeLike() {
				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '您还未登录，去登录？',
				// 		success:  (res) => {
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: '/pages/login/index'
				// 				})
				// 			}
				// 		}
				// 	});
				// 	return false
				// }
				// if (this.info.collected) return false;
				http({
					url: 'card/user-profile/create/businesscard',
					method: 'put',
					data: {
						collectedUserId: this.userId
					}
				}).then(res => {
					if (res.code === 0) {
						this.info.collected = !this.info.collected
						uni.showToast({
							title: res.data,
							icon: 'none'
						})
					}
				})
			},
			zan() {
				if (this.info.like) return false;
				http({
					url: 'card/user-profile/like/update',
					method: 'put',
					data: {
						userId: this.userId,
						type: 2
					}
				}).then(res => {
					if (res.code === 0) {
						this.info.userProfileDO.likeCount++
						this.info.like = true
						// this.getData()
					}
				})
			},
			copy() {
				// if (this.info.userProfileDO.wechatId)
				uni.setClipboardData({
					data: this.info.userProfileDO.wechatId,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			// goAddress() {
			// 	uni.openLocation({ 
			// 	   "latitude":28.23529,
			// 	   "longitude":112.93134,
			// 	   address: '长沙市岳麓区人民政府(含光路南)', //要去的具体地址 
			// 	})
			// },
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.info.userProfileDO.phoneNumber
				});
			},
			saveToPhone() {
				uni.addPhoneContact({
					// nickName: '昵称',
					// lastName: '姓',
					// firstName: '名',
					// remark: '备注',
					firstName: this.info.userProfileDO.realName || this.info.userProfileDO.nickname || '名片',
					mobilePhoneNumber: this.info.userProfileDO.phoneNumber,
					// weChatNumber: 'wx123',
					success: function() {
						console.log('success');
					},
					fail: function() {
						console.log('fail');
					}
				});
			},
			getInfo() {
				http({
					url: 'card/user-profile/get'
				}).then(res => {
					if (res.code === 0) {
						this.display = res.data.display || 0
						this.myInfo = res.data
					}
				})
			},
			getData() {
				http({
					url: 'card/user-profile/getById',
					data: {
						id: this.userId
					}
				}).then(res => {
					if (res.code === 0) {
						// this.getRecommData(this.encryptedData.split('_')[1])
						res.data.companyProfileDO.address = (res.data.companyProfileDO.address ? JSON.parse(res
							.data.companyProfileDO.address) : {})
						if (res.data.companyProfileDO.address) {
							this.covers[0].latitude = res.data.companyProfileDO.address.latitude
							this.covers[0].longitude = res.data.companyProfileDO.address.longitude
						}
						res.data.companyProfileDO.companyImpression = res.data.companyProfileDO.companyImpression ?
							JSON.parse(res.data.companyProfileDO.companyImpression) : []
						res.data.companyProfileDO.myImpression = res.data.companyProfileDO.myImpression ? JSON
							.parse(res.data.companyProfileDO.myImpression) : [],
							res.data.companyProfileDO.companyComments = res.data.companyProfileDO.companyComments ?
							JSON.parse(res.data.companyProfileDO.companyComments) : {},
							res.data.companyProfileDO.companyIntroImg = res.data.companyProfileDO.companyIntroImg ?
							JSON.parse(res.data.companyProfileDO.companyIntroImg) : [],
							// res.data.companyProfileDO.myImpression = res.data.companyProfileDO.myImpression ? JSON.parse(res.data.companyProfileDO.myImpression) : []						
							this.info = {
								...res.data
							}
						this.saveShare(3)
						getApp().globalData.encryptedData = getApp().globalData.encryptedData || res.data
							.userProfileDO.level
						const modules = res.data.companyProfileDO.sort ? res.data.companyProfileDO.sort.split(
							',') : []
						this.modules = this.modules.concat(modules)
					}
				})
			},
			getRecommData() {
				http({
					url: 'card/user-profile/get/recommender',
					data: {
						id: this.userId
					}
				}).then(res => {
					if (res.code === 0) {
						this.recommInfo = res.data
					}
				})
			},
			saveShare(type) {
				const userId = this.info.companyProfileDO.id || uni.getStorageSync('userId')
				if (userId) {
					http({
						url: 'card/user-profile/like/update',
						method: 'put',
						data: {
							userId,
							type: type || 1
						}
					})
				}
			},
		},
		onShareAppMessage() {
			const userId = this.info.companyProfileDO.id
			this.saveShare()
			return {
				title: '您好，这是我的名片，请惠存',
				// path: '/pagesA/share/card?id=' + userId, // 分享的路径
				path: `/pagesA/share/card?id=${userId}&encrypted=${this.info.userProfileDO.level}`, // 分享的路径
				imageUrl: `https://ywtmp.hnwytkj.com/static/images/${this.info.companyProfileDO.id}/shareCard.jpg?t=${Math.random()}` // 可选，分享图片的路径
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		padding-bottom: calc(160rpx + var(--safe-area-inset-bottom) + 60rpx);

		.top {
			height: 880rpx;
			// height: 1146rpx;
			padding: 60rpx 30rpx 0;
			background-image: linear-gradient(180deg, #4B73FF, #FFFFFF);

			&.top2 {
				height: 1120rpx;
			}

			&.top3 {
				// height: 1120rpx;
				height: 1386rpx;
			}

			.recomm-info {
				padding: 30rpx;
				height: 210rpx;
				background-image: url('https://ywtmp.hnwytkj.com/static/static/images/recomm-bj.png');
				background-size: 100% 100%;
				margin-bottom: 29rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;

				.avatar {
					width: 120rpx;
					height: 120rpx;
					background: #FFFFFF;
					border-radius: 50%;
					border: 6rpx solid #E3DDD1;
					box-sizing: border-box;
					overflow: hidden;

					image {
						// width: 138rpx;
						// height: 138rpx;
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 30rpx;

					.right-top {
						font-weight: bold;
						font-size: 40rpx;
						color: #333333;
						display: flex;
						align-items: flex-end;
						margin-bottom: 30rpx;

						.company {
							font-weight: 500;
							font-size: 28rpx;
							margin-left: 23rpx;
						}
					}

					.right-bottom {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.text {
							display: flex;
							align-items: center;

							image {
								width: 42rpx;
								height: 42rpx;
								margin-right: 16rpx;
							}
						}

						.btn {
							width: 180rpx;
							height: 60rpx;
							background: #FFFFF1;
							border-radius: 30rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #8C8577;
							text-align: center;
							line-height: 60rpx;
						}
					}
				}
			}

			.section {
				height: 617rpx;
				border-radius: 20rpx;
				background: #EEF2FF;

				.section-top {
					height: 117rpx;
					position: relative;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #333333;
					line-height: 117rpx;
					padding-left: 42rpx;

					.avatar {
						width: 150rpx;
						height: 150rpx;
						background: #FFFFFF;
						border-radius: 50%;
						border: 6rpx solid #90BCFF;
						position: absolute;
						z-index: 10;
						right: 40rpx;
						top: 40rpx;
						// padding: 6rpx 0 0 6rpx;
						box-sizing: border-box;
						overflow: hidden;

						image {
							// width: 138rpx;
							// height: 138rpx;
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}

				.section-bottom {
					height: 500rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					// background-image: url('/static/images/pic.png');
					// background-size: 262rpx 278rpx;
					// background-position: 388rpx 152rpx;
					position: relative;

					.background-icon {
						width: 262rpx;
						height: 278rpx;
						position: absolute;
						right: 40rpx;
						bottom: 70rpx;
					}

					.section-bottom-content {
						padding: 40rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						position: relative;
						z-index: 9;

						.item-section {
							display: flex;
							// align-items: center;
							font-weight: bold;
							line-height: 48rpx;

							image {
								width: 48rpx;
								height: 48rpx;
								margin-right: 30rpx;
							}

							text {
								flex: 1;
							}

							&.address {
								line-height: 50rpx;
							}
						}
					}

					.edit-btn {
						width: 180rpx;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						background: #DDE5FF;
						border-radius: 20rpx 0px 20rpx 0px;
						font-weight: 500;
						font-size: 28rpx;
						color: #7495FF;
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}

			.red-envelope {
				margin-top: 30rpx;

				image {
					width: 100%;
				}
			}

			.action-section {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.action-btn {
					width: 335rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #4B73FF;
					border-radius: 20rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;

					&:nth-child(2) {
						background: #72D952;
					}
				}
			}

			.num-box {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.flex {
					position: relative;

					button {
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
						opacity: 0;
					}
				}
			}
		}

		.bottom {
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px #EEEEEE;
			border-radius: 40rpx 40rpx 0 0;

			.introduce-item {
				box-shadow: 0px 0px 20rpx 0px #EEEEEE;
				border-radius: 40rpx 40rpx 0 0;
				padding-top: 50rpx;

				.title {
					font-weight: bold;
					font-size: 34rpx;
					color: #333333;
					padding-left: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.right {
						padding-right: 30rpx;

						image {
							width: 70rpx;
							height: 70rpx;

							&:nth-child(2) {
								margin: 0 20rpx;
							}
						}
					}
				}

				.introduce-item-content {
					padding: 40rpx 30rpx 50rpx;

					.tag {
						width: 207rpx;
						height: 70rpx;
						text-align: center;
						line-height: 70rpx;
						background: #EAFBF5;
						border-radius: 35rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #17B185;
						margin-right: 20rpx;

						&.tag2 {
							// background: #EAF1FB;
							background: rgba(23, 95, 177, 0.3);
							color: #175FB1;
						}
					}

					.item-content {
						width: 217rpx;
						height: 192rpx;
						background: #F4F7FF;
						border-radius: 20rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;

						.num {
							font-family: DIN Next LT Pro;
							font-size: 50rpx;
						}
					}

					.placeholder {
						height: 400rpx;
						background: #F4F7FF;
						border-radius: 20rpx;
						overflow: hidden;

						video {
							width: 100%;
							height: 100%;
						}
					}

					image {
						width: 100%;
						height: 400rpx;
						border-radius: 20rpx;
						margin-bottom: 20rpx;
					}

					.swiper {
						margin-bottom: 20rpx;
					}

					.text {
						font-size: 28rpx;
					}

					.map {
						map {
							width: 100%;
							height: 400rpx;
						}
					}

					.item-content2 {
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
						position: relative;

						.num {
							font-family: DIN Next LT Pro;
							font-size: 50rpx;
						}

						.img {
							width: 138rpx;
							height: 140rpx;
							border-radius: 0;
							margin: 0;
							margin-bottom: 20rpx;
						}

						button {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							opacity: 0;
						}
					}

					.add-btn {
						height: 240rpx;
						background: #F3F6FF;
						border-radius: 20rpx;
						border: 2rpx dashed #A7BBFF;
						font-weight: bold;
						font-size: 34rpx;
						color: #C3D0FF;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 123rpx;
							height: 136rpx;
							margin-right: 50rpx;
						}
					}
				}
			}
		}
	}

	.popup-content {
		text-align: center;
		width: 600rpx;
		height: 400rpx;
		box-sizing: border-box;
		padding-top: 100rpx;

		.text {
			padding: 40rpx 0;
			font-size: 32rpx;
		}

		button {
			margin-top: 20rpx;
			width: 280rpx;
			font-size: 28rpx;
		}
	}
</style>